/**
 * 绘制 map 主文件，mapTool 主体
 */
import mapMix from '../mixins/mapMix';
import currentSprite from './currentSprite';
import { Rect, Layer, Group, Text } from '../render/index';

export default class gameBody extends mapMix {
    /**
     * canvas 主画布
     */
    public canvas: any;

    /**
     * 底色
     */
    public groundColor: any;

    /**
     * 游戏区域
     */
    public gamePreview: any;
    
    /**
     * 右侧预览块列表
     */
    public nextSpriteType = '';
    public nextPreview: any;
    public nextPreviewIcons: any[][] = [];

    /**
     * 底部区域
     */
    public footerGroup: any;

    /**
     * 积分显示
     */
    public integralCanvas:any;

    constructor() {
        super({
            id: 'tetris_backround',
        });
        Layer({ // 背景画布
            id: this.id,
            x: 0,
            y: 0,
            opacity: 1,
            scale: { x: 1, y: 1 },
            rotation: 0,
        }).then(canvas => {

            this.canvas = canvas;
            Rect({
                x: 0,
                y: 0,
                width: this.mapConst.pW || 0,
                height: this.mapConst.pH || 0,
                fill: '#494A5F'
            }).then(groundColor => {
                this.groundColor = groundColor;
                this.canvas.add(this.groundColor);
                this.mapConst.editor?.konva.add(this.canvas);
                this.loadGamePreviewRectFN();
                this.loadPreviewFN();
                this.footerLoadFN();
            });
        });
    }

    /**
     * 加载游戏区域
     */
    public loadGamePreviewRectFN(){
        Group({
            x: this.mapConst.gX,
            y: this.mapConst.gY,
            width: this.mapConst.gridW * this.mapConst.rectsize,
            height: this.mapConst.gridH * this.mapConst.rectsize,
        }).then(gamePreview => {
            this.gamePreview = gamePreview;
            this.canvas.add(this.gamePreview);

            for (let index = 0; index < this.mapConst.gridH; index++) {

                this.mapConst.gridIconList[index] = [];
                const y = index * this.mapConst.rectsize;
                for (let indexW = 0; indexW < this.mapConst.gridW; indexW++) {
                    const x = this.mapConst.rectsize * indexW;

                    Rect({
                        x: x,
                        y: y,
                        width: this.mapConst.rectsize - 1,
                        height: this.mapConst.rectsize - 1,
                        fill: '#000000'
                    }).then(gridHRect => {
                        this.mapConst.gridIconList[index].push({
                            rect: gridHRect,
                            value: 0,
                        });
                        this.gamePreview.add(gridHRect);
                    });
                }
            }

            this.mapConst.spriteThis = new currentSprite();
        });
    }

    /**
     * 加载右侧预览
     */
    public loadPreviewFN(){
        let gX = this.mapConst.gX; 
        gX = gX + (this.mapConst.gridW * this.mapConst.rectsize);
        gX = gX + (this.mapConst.rectsize * 2);
        Group({
            x: gX,
            y: this.mapConst.gY,
            width: this.mapConst.rectsize * 4,
            height: this.mapConst.rectsize * 4,
        }).then(nextPreview => {
            this.nextPreview = nextPreview;
            this.canvas.add(this.nextPreview);
            this.loadGamePreviewIconRectFN();
            this.integralInitFN();
        });
    }
    /**
     * 加载右侧显示区域
     */
    public loadGamePreviewIconRectFN(){
        if(this.nextSpriteType === this.mapConst.nextSpriteData.type){
            return;
        }
        this.nextPreview.destroyChildren();
        this.nextSpriteType = this.mapConst.nextSpriteData.type;
        const spriteData = this.mapConst.nextSpriteData.sprite;

        let marginW = 4 - spriteData[0][0].length;
        marginW = marginW * this.mapConst.rectsize / 2;
        let marginH = 4 - spriteData[0].length;
        marginH = marginH * this.mapConst.rectsize / 2;

        Rect({  // 背景
            x: 0,
            y: 0,
            width: this.mapConst.rectsize * 4,
            height: this.mapConst.rectsize * 4,
            fill:'#000000'
        }).then(previewIcon => {
            this.nextPreview.add(previewIcon);

            for (let index = 0; index < spriteData[0].length; index++) {
    
                const element = spriteData[0][index];
                const y = index * this.mapConst.rectsize + marginH;
    
                for (let indexS = 0; indexS < element.length; indexS++) {
    
                    const elementS = element[indexS];
                    const x = this.mapConst.rectsize * indexS + marginW;
                    Rect({
                        x: x,
                        y: y,
                        width: this.mapConst.rectsize - 1,
                        height: this.mapConst.rectsize - 1,
                        fill: elementS === 1 ? '#dddddd' : '#000000'
                    }).then(previewIcon => {
                        this.nextPreview.add(previewIcon);
                    });
                }
            }
        });

    }

    /**
     * 加载计分区域
     */
    public integralInitFN(){
        let gX = this.mapConst.gX; 
        gX = gX + (this.mapConst.gridW * this.mapConst.rectsize);
        gX = gX + (this.mapConst.rectsize * 2);
        Text({
            x: gX,
            y: this.mapConst.rectsize,
            fill: '#ffffff',
            text: '积分',
            fontSize: 12,
            strokeWidth: 4,
        }).then((pageLabel) => {
            this.canvas.add(pageLabel);
        });
        Text({
            x: gX + 4,
            y: -this.mapConst.rectsize * 4,
            fill: '#ffffff',
            text: '0',
            fontSize: 18,
            strokeWidth: 4,
        }).then((pageLabel) => {
            this.integralCanvas = pageLabel;
            this.canvas.add(this.integralCanvas);
        });
    }

    /**
     * 加载底部显示区域
     */
    public footerLoadFN(){
        const gph = (this.mapConst.gridH * (this.mapConst.rectsize + 2));
        const height = this.mapConst.gH - gph;
        Group({
            x: this.mapConst.gX,
            y: this.mapConst.gY + gph,
            width: this.mapConst.gW,
            height: height,
        }).then(footerGroup => {
            this.footerGroup = footerGroup;
            this.canvas.add(footerGroup);

            const rectSize = this.mapConst.rectsize * 4;
            Rect({  // 左
                x: 0,
                y: (height - rectSize) / 2,
                width: rectSize,
                height: rectSize,
                fill: '#000000'
            }).then((RectBG:any) => {
                this.footerGroup.add(RectBG);
                this.mapConst.settingEventFN(RectBG, () => {
                    this.mapConst.spriteMoveTransverseFN(-1);
                });
            });

            Rect({  // 右
                x: this.mapConst.gW - rectSize,
                y: (height - rectSize) / 2,
                width: rectSize,
                height: rectSize,
                fill: '#000000'
            }).then((RectBG:any) => {
                this.footerGroup.add(RectBG);
                this.mapConst.settingEventFN(RectBG, () => {
                    this.mapConst.spriteMoveTransverseFN(1);
                });
            });

            Rect({  // 上
                x: (this.mapConst.gW - rectSize) / 2,
                y: 0,
                width: rectSize,
                height: rectSize,
                fill: '#000000'
            }).then((RectBG:any) => {
                this.footerGroup.add(RectBG);
                this.mapConst.settingEventFN(RectBG, () => {
                    this.mapConst.changeSpriteFN();
                });
            });

            Rect({  // 下
                x: (this.mapConst.gW - rectSize) / 2,
                y: height - rectSize,
                width: rectSize,
                height: rectSize,
                fill: '#000000'
            }).then((RectBG:any) => {
                this.footerGroup.add(RectBG);
                this.mapConst.settingEventFN(RectBG, () => {
                    this.mapConst.moveTime = 50;
                });
            });

            Rect({  // 中
                x: (this.mapConst.gW - rectSize) / 2,
                y: (height - rectSize) / 2,
                width: rectSize,
                height: rectSize,
                fill: '#000000'
            }).then((RectBG:any) => {
                this.footerGroup.add(RectBG);
                this.mapConst.settingEventFN(RectBG, () => {
                    this.mapConst.isPause = 2;
                    this.mapConst.isPauseLabel = '游戏暂停';
                });
            });

        });
    }

}
